<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Ayurvedic - Medical Template</title>

    <link rel="shortcut icon" type="image/x-icon" href="assets/images/cropped-favicon-32x32.png"/>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>

    <link href="assets/css/plugin.css" rel="stylesheet" type="text/css"/>

    <link href="assets/css/dashboard.css" rel="stylesheet" type="text/css"/>

    <link href="assets/fonts/flaticon.css" rel="stylesheet" type="text/css"/>

    <link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="assets/fonts/line-icons.css" type="text/css"/>
    <link rel="stylesheet" href="common/font-awesome/css/font-awesome.min.css">
    <script async src='/cdn-cgi/challenge-platform/h/g/scripts/invisible.js'></script>
</head>

<style>
    em {
        font-style: italic;
        font-weight: bold;
        color: red; /* 设置文字颜色为红色，你也可以根据需要调整颜色值 */
    }

</style>

<body>

<div id="preloader">
    <div id="status"></div>
</div>

<div th:replace="common/common-bar::#header"></div>

<div id="dashboard">
    <div class="container">
        <div class="dashboard-main">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="dashboard-content">
                        <!-- 添加症状文本框和按钮 -->
                        <div class="w-lg-75 m-auto mt-4">
                            <div class="row">
                                <div class="col-md-8">
                                    <input type="text" class="form-control" id="symptom-textbox"
                                           placeholder="请输入症状或药品...">
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary btn-block" onclick="searchBySymptom()">按症状搜索
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 添加标题，显示搜索结果信息 -->
                        <div class="dashboard-review single-comments">

                            <div class="comments">
                                <!-- 如果没有搜索结果，显示提示信息 -->
                                <div th:if="${medicineDocList eq null}" style="text-align: center;">
                                    <p>抱歉，未找到相关药品。</p>
                                </div>
                                <div id="medicineListParent">

                                </div>
                                <h3 style="text-align: center; margin-top: 30px;" >仓库药品列表</h3>
                                <!-- 循环显示药品列表 -->
                                <div th:if="${#strings.isEmpty(symptomText)}">
                                <div class="comment-box d-flex align-items-center justify-content-between"
                                     th:each="me:${medicineDocList}"  >
                                    <!-- 显示药品信息 -->
                                    <div class="comment-image">
                                        <a th:href="@{findMedicineOne(id=${me.id})}" class="hit">
                                            <img th:src="${me.imgPath}" alt="image"/>
                                        </a>
                                    </div>
                                    <div class="comment-content" style="width: 80%; height: 150px">
                                        <a th:href="@{findMedicineOne(id=${me.id})}">
                                            <h5 class="m-0 highlight-link" th:utext="${me.medicineName}">药品名称</h5>
                                        </a>
                                        <p class="comment-date mb-2" th:text="${me.medicineBrand}+'牌'">April 25, 2019
                                            at 10:46 am</p>
                                        <span class="num-rating white"
                                              th:text="${me.medicineType eq 0}?'西药':(${me.medicineType eq 1}?'中药':'中性药')">4.6/5</span>
                                        <span class="comment-title"><i>"是药三分毒，切忌不要乱吃药！"</i></span>
                                        <p class="comment mt-2" th:text="${me.medicineEffect}">
                                            Take in the iconic skyline and visit the neighbourhood hangouts that you've
                                            only ever seen on TV. Take in the iconic skyline and visit the
                                            neighbourhood.
                                        </p>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="search-list-sh p-0">
    <div class="container">
        <div class="search-again bg-white text-center mt-n3">

            <div class="sc-title-two text-center mb-6">
                <h4 class="cl-green">没有找到你想要的结果吗？</h4>
                <h2>搜索一下</h2>
            </div>
            <div class="w-lg-75 m-auto">
                <p>
                    智慧医药您提供疾病查询,常见疾病大全,帮您全面了解疾病病因症状、检查治疗、饮食护理等信息,是您疾病查询的好帮手。</p>
                <div class="side-search position-relative overflow-hidden rounded-1 w-lg-50 m-auto mt-4">
                    <input type="text" class="form-control" id="search-medicine" placeholder="搜索..."/>
                    <a class="search-btn sh-hover bg-lgreen" onclick="searchMedicine()"><i class="fa fa-search"></i></a>
                </div>
                <!-- 显示搜索历史 -->
                <div th:if="${history ne null}" style="margin-top: 10px">
                    <span>搜索历史：</span>
                    <a th:each="his:${history}"
                       th:href="${his.operateType eq 3}?@{findMedicines(nameValue=${his.searchValue})}:@{findIllness(kind=${his.kind eq '无'}?null:${his.kind},illnessName=${his.nameValue eq '无'}?null:${his.nameValue})}">
                        <span th:text="${his.operateType eq 3}?(${his.searchValue} + '(药)'):${his.searchValue}"></span>&nbsp;&nbsp;&nbsp;
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:replace="common/common-bar::#back"></div>
<div th:replace="common/common-bar::#footer"></div>
<div th:replace="common/common-bar::#search"></div>
<div th:replace="common/common-bar::#back-to-top"></div>

<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugin.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/custom-swiper.js"></script>
<script src="assets/js/custom-nav.js"></script>
<script src="common/utils/reg.js"></script>
<script src="common/layer/layer.js"></script>
<script src="common/custom.js"></script>
<script src="assets/js/xtiper.min.js"></script>

<script>
    function searchBySymptom() {
        const symptom = $('#symptom-textbox').val(); // 获取输入框的值作为症状信息
        $.ajax({
            type: 'GET',
            url: 'ajaxByEs/' + symptom,
            success: function (data) {
                // 找到包含药品信息的父元素
                var medicineListParent = document.getElementById('medicineListParent'); // 假设药品信息父元素的 id 是 medicineListParent
                // 清空药品信息父元素的内容
                medicineListParent.innerHTML = '';
                // 遍历新的药品数据，并生成对应的HTML内容
                data.forEach(function (medicine) {
                    var newMedicineDiv = document.createElement('div');
                    newMedicineDiv.className = 'comment-box d-flex align-items-center justify-content-between';
                    newMedicineDiv.innerHTML = `
        <div class="comment-image">
            <a href="/findMedicineOne?id=${medicine.id}" class="hit">
                <img src="${medicine.imgPath}" alt="image"/>
            </a>
        </div>
        <div class="comment-content" style="width: 80%; height: 150px">
            <a href="/findMedicineOne?id=${medicine.id}">
                <h5 class="m-0 highlight-link">${medicine.medicineName}</h5>
            </a>
            <p class="comment-date mb-2">${medicine.medicineBrand} 牌</p>
            <span class="num-rating white">${medicine.medicineType === 0 ? '西药' : (medicine.medicineType === 1 ? '中药' : '中性药')}</span>
            <span class="comment-title"><i>"是药三分毒，切忌不要乱吃药！"</i></span>
            <p class="comment mt-2">${medicine.medicineEffect}</p>
        </div>
    `;
                    // 将新生成的药品信息添加到药品信息父元素中
                    medicineListParent.appendChild(newMedicineDiv);
                });
            },
            error: function () {
                alert("请输入药品名称或症状信息!")
            }
        });
    }
</script>


</body>

</html>
